<template>
	<view>
		<view class="bg-white padding-lr padding-tb-sm">
			<view class="bg-gray padding-lr-sm padding-tb-sm radius flex align-center">
				<text class="cuIcon-search padding-right-sm"></text>
				<input class="text-df" style="flex: 1;" v-model="sval" type="text" confirm-type="search" :placeholder="placeholder"
					@confirm="onSearch">
				<text v-if="sval" class="cuIcon-close text-gray padding-left-xs" @tap="sval = ''"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"z-search",
		data() {
			return {
				sval: '',
				placeholder: ''
			};
		},
		props:{
			data: '',
			msg: '',
		},
		mounted() {
			this.sval = this.data;
			this.placeholder = this.msg;
		},
		methods:{
			onSearch(){
				this.$emit('onSearch', {val: this.sval});
			}
		}
	}
</script>

<style lang="scss">

</style>